<template>
  <el-radio-group v-model="radio" size="large" style="width: 100%">
    <div class="container-list" v-for="(item, i) in tableData" :key="item">
      <div class="list-header">
        <div class="flex">
          <div class="list-header-line"></div>
          <div class="list-header-name">
            {{ item.templateName }} 丨 {{ item.portraitName }}
            <span style="font-size: 14px">（付款期数：{{ item.contracteesList.length }}期）</span>
          </div>
        </div>
        <div class="flex list-header-right">
          <el-radio :value="item" size="large"></el-radio>
        </div>
      </div>
      <div class="list-item">
        <div :class="{ 'list-card-more': item.show }" class="list-card">
          <div class="list-item-card" v-for="items in item.contracteesList" :key="items">
            <el-row class="grid-demo" :gutter="24">
              <el-col :span="4">
                <el-tooltip :content="items.nodeName">
                  <div class="text-over">{{ items.nodeName || "" }}</div>
                </el-tooltip>
              </el-col>
              <el-col :span="5">
                <div>施工节点：{{ items.constructionNodeName }}</div>
              </el-col>
              <el-col :span="5">
                <el-tooltip :content="getAcceptanceName(items.modelId, items.standardId, items)">
                  <div class="text-over">验收项：{{ getAcceptanceName(items.modelId, items.standardId, items) }}</div>
                </el-tooltip>
              </el-col>
              <el-col :span="5">
                <el-tooltip :content="items.computeRule === 1 ? '发包总金额*付款比例' : '工种发包总价*付款比例'">
                  <div class="text-over">
                    计算规则：{{ items.computeRule === 1 ? "发包总金额*付款比例" : "工种发包总价*付款比例" }}
                  </div>
                </el-tooltip>
              </el-col>
              <el-col :span="5">
                <div>付款比例：{{ items.payRate }}%</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="list-item-more" v-if="item.contracteesList.length > 2">
          <div class="flex" style="cursor: pointer" @click="item.show = !item.show">
            <div style="margin-right: 5px">{{ item.show ? "收起更多" : "展开更多" }}</div>
            <el-icon v-if="!item.show">
              <ArrowDown />
            </el-icon>
            <el-icon v-else>
              <ArrowUp />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </el-radio-group>
</template>
<script setup>
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { ref } from "vue";
import { standardTemplateTree } from "@/apis/contracting";

defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});
const radio = ref();
const templateTree = ref([]);

const getTemplateTree = async () => {
  const { data } = await standardTemplateTree();
  templateTree.value = data;
};
getTemplateTree();

const getAcceptanceName = (modelId, standardId, items) => {
  if (!templateTree.value.length) {
    items.acceptanceItem = "";
    return "";
  }
  const objTree = templateTree.value.find(item => item.standardId === modelId);
  if (objTree) {
    let html = objTree.standardName;
    if (standardId) {
      const childObj = objTree.children.find(item => item.standardId === standardId);
      if (childObj) {
        html = `${html}/${childObj.standardName}`;
      }
    }
    items.acceptanceItem = html;
    return html;
  }
  return "";
};
defineExpose({ radio });
</script>
<style scoped lang="scss">
@use "index";
</style>
